<script setup>
import {Back, Message, Operation, Right, UserFilled} from "@element-plus/icons-vue";
import {useStore} from "@/store";
import {isRoleAdmin, logout} from "@/net";
import router from "@/router";
import {useRoute} from "vue-router";
import {computed} from "vue";

const route = useRoute()
const store = useStore()

const isAdminPage = computed(() => route.fullPath.startsWith("/admin"))

function userLogout() {
    logout(() => router.push("/"))
}
</script>

<template>
    <div class="user-info">
        <slot/>
        <div class="profile">
            <div>{{ store.user.username }}</div>
            <div>{{ store.user.email }}</div>
        </div>
        <el-dropdown>
            <el-avatar :src="store.avatarUrl"/>
            <template #dropdown>
                <el-dropdown-item>
                    <el-icon>
                        <Operation/>
                    </el-icon>
                    <span>个人设置</span>
                </el-dropdown-item>
                <el-dropdown-item>
                    <el-icon>
                        <Message/>
                    </el-icon>
                    <span>消息列表</span>
                </el-dropdown-item>
                <el-dropdown-item @click="userLogout" divided>
                    <el-icon>
                        <Back/>
                    </el-icon>
                    <span>退出登录</span>
                </el-dropdown-item>
                <template v-if="isRoleAdmin()">
                    <el-dropdown-item
                            v-if="!isAdminPage"
                            @click="router.push('/admin')">
                        <el-icon>
                            <UserFilled/>
                        </el-icon>
                        <span>切换后台</span>
                    </el-dropdown-item>
                    <el-dropdown-item
                            @click="router.push('/index')"
                            v-else>
                        <el-icon>
                            <Back/>
                        </el-icon>
                        <span>切换前台</span>
                    </el-dropdown-item>
                </template>

            </template>
        </el-dropdown>
    </div>
</template>

<style scoped>
.user-info {
    width: 320px;
    display: flex;
    gap: 20px;
    justify-content: flex-end;
    align-items: center;

    .el-avatar:hover {
        cursor: pointer;
        border: none;
    }


    .profile {
        text-align: right;

        :first-child {
            font-size: 18px;
            font-weight: bold;
            line-height: 20px;
        }

        :last-child {
            font-size: 10px;
            color: grey;
        }
    }
}

</style>